<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper style="height: 240px;" class="banner" indicatorDots: false autoplay="true" interval="3000" duration="500" circular="true">
			<swiper-item>
				<image class="swiper" src="https://shop.sdxinruan.com/taiqiu/static/shiguang.jpg" />
			</swiper-item>
		</swiper>
		<view class="port-two">
			<view class="port-two-1-dian1">
				<view class="port-two-1-dian">
					<p class="port-two-1-dian-name">新汇路店</p>
					<view class="port-two-1-dian-name-qh">
						<p class="port-two-1-dian-name-qh-p">切换门店</p>
						<u-icon size="26upx" color="#fff" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="port-two-2">
					<view class="port-two-2-le">
						<p class="port-two-2-le-p1">营业时间：00:00-24:00</p>
						<p class="port-two-2-le-p1">杭州市拱墅区新汇路184号二楼</p>
						<p class="port-two-2-le-p2">距我783km</p>
					</view>
					<view class="port-two-2-ri">
						<view class="port-two-2-ri-vi">
							<image class="port-two-2-ri-img" src="https://shop.sdxinruan.com/taiqiu/static/navigate.png"
								mode=""></image>
							<p class="port-two-2-ri-vi-p">导航</p>
						</view>
						<view class="port-two-2-ri-vi">
							<image class="port-two-2-ri-img" src="https://shop.sdxinruan.com/taiqiu/static/mobile.png"
								mode=""></image>
							<p class="port-two-2-ri-vi-p">电话</p>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xuanxiang">
			<view @click="show = true" class="xuanxiang-view">
				<image class="xuanxiang-view-img" src="https://shop.sdxinruan.com/taiqiu/static/openDoor.png"
					mode=""></image>
				<p class="xuanxiang-view-p">开门</p>
			</view>
			<view class="xuanxiang-view">
				<image class="xuanxiang-view-img" src="https://shop.sdxinruan.com/taiqiu/static/Renewals.png"
					mode=""></image>
				<p class="xuanxiang-view-p">续单</p>
			</view>
			<view class="xuanxiang-view">
				<image class="xuanxiang-view-img" src="https://shop.sdxinruan.com/taiqiu/static/verify.png" mode="">
				</image>
				<p class="xuanxiang-view-p">验券</p>
			</view>
			<view class="xuanxiang-view">
				<image class="xuanxiang-view-img" src="https://shop.sdxinruan.com/taiqiu/static/Coupons.png"
					mode=""></image>
				<p class="xuanxiang-view-p">优惠券</p>
			</view>
		</view>
		<view class="port-three">
			<p class="port-three-tit">包间列表</p>
			<navigator url="../../pages/room/room">
				<view class="port-three-list">
					<view class="port-three-list-one-port">
						<view class="port-three-list-one-port">
							<image class="list-one-port-img" src="https://shop.sdxinruan.com/taiqiu/static/fangjian.jpeg"
								mode=""></image>
								<p class="daiqingjie">待清洁</p>
						</view>
						<view class="list-one-port-ri">
							<view class="list-one-port-ri-baoming">
								<p class="list-one-port-ri-baoming-p">VIP 富豪厅</p>
								<p class="list-one-port-ri-baoming-p1">（商务包）</p>
							</view>
							<view class="list-one-port-ri-tiaojian">
								<p class="list-one-port-ri-tiaojian-li">空调</p>
								<p class="list-one-port-ri-tiaojian-li">有窗</p>
								<p class="list-one-port-ri-tiaojian-li">4-10人</p>
								<p class="list-one-port-ri-tiaojian-li">商务</p>
								<p class="list-one-port-ri-tiaojian-li">WIFI</p>
								<p class="list-one-port-ri-tiaojian-li">玉石麻将</p>
								<p class="list-one-port-ri-tiaojian-li">茶台</p>
								<p class="list-one-port-ri-tiaojian-li">茶吧机</p>
								<p class="list-one-port-ri-tiaojian-li">沙发</p>
							</view>
							<view class="jiage">
								<view class="jiage-le">
									<p class="jiage-le-red">￥35.00</p>
									<p class="jiage-le-p1">元/小时</p>
								</view>
								<view class="jiage-ri">
									<p class="jiage-ri-p1">续单</p>
									<p class="jiage-ri-p2">￥35元</p>
									<p class="jiage-ri-p1">/小时</p>
								</view>
							</view>
							<view class="taocan">
								<view class="taocan-li">
									<p class="taocan-li-1">3小时套餐：￥90.0元</p>
									<p class="taocan-li-1 taocan-li-2">5小时套餐：￥150.0元</p>
								</view>
								<navigator url="/pages/room/room">
									<p class="yuding">预定</p>
								</navigator>
								<!-- <p class="yuding" @click='predetermine'>预定</p> -->
							</view>
						</view>
					</view>
					<div class="shiduan">
						<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
							<p class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
							<p class="shiduan-1-p2">{{ num }}</p>
						</div>
					</div>
					<view class="shiduan-2">
						<view class="shiduan-2-view">
							<p class="shiduan-1-p1"></p>
							<p class="shiduan-2-view-p">已预订时段</p>
						</view>
						<view class="shiduan-2-view shiduan-2-view1">
							<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
							<p class="shiduan-2-view-p">可预订时段</p>
						</view>
					</view>
				</view>
			</navigator>
			<navigator url="../../pages/room/room">
				<view class="port-three-list">
					<view class="port-three-list-one-port">
						<view class="port-three-list-one-port">
							<image class="list-one-port-img" src="https://shop.sdxinruan.com/taiqiu/static/fangjian.jpeg"
								mode=""></image>
								<p class="daiqingjie daiqingjie1">空闲中</p>
						</view>
						<view class="list-one-port-ri">
							<view class="list-one-port-ri-baoming">
								<p class="list-one-port-ri-baoming-p">VIP 富豪厅</p>
								<p class="list-one-port-ri-baoming-p1">（商务包）</p>
							</view>
							<view class="list-one-port-ri-tiaojian">
								<p class="list-one-port-ri-tiaojian-li">空调</p>
								<p class="list-one-port-ri-tiaojian-li">有窗</p>
								<p class="list-one-port-ri-tiaojian-li">4-10人</p>
								<p class="list-one-port-ri-tiaojian-li">商务</p>
								<p class="list-one-port-ri-tiaojian-li">WIFI</p>
								<p class="list-one-port-ri-tiaojian-li">玉石麻将</p>
								<p class="list-one-port-ri-tiaojian-li">茶台</p>
								<p class="list-one-port-ri-tiaojian-li">茶吧机</p>
								<p class="list-one-port-ri-tiaojian-li">沙发</p>
							</view>
							<view class="jiage">
								<view class="jiage-le">
									<p class="jiage-le-red">￥35.00</p>
									<p class="jiage-le-p1">元/小时</p>
								</view>
								<view class="jiage-ri">
									<p class="jiage-ri-p1">续单</p>
									<p class="jiage-ri-p2">￥35元</p>
									<p class="jiage-ri-p1">/小时</p>
								</view>
							</view>
							<view class="taocan">
								<view class="taocan-li">
									<p class="taocan-li-1">3小时套餐：￥90.0元</p>
									<p class="taocan-li-1 taocan-li-2">5小时套餐：￥150.0元</p>
								</view>
								<navigator url="/pages/room/room">
									<p class="yuding">预定</p>
								</navigator>
							</view>
						</view>
					</view>
					<div class="shiduan">
						<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
							<p class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
							<p class="shiduan-1-p2">{{ num }}</p>
						</div>
					</div>
					<view class="shiduan-2">
						<view class="shiduan-2-view">
							<p class="shiduan-1-p1"></p>
							<p class="shiduan-2-view-p">已预订时段</p>
						</view>
						<view class="shiduan-2-view shiduan-2-view1">
							<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
							<p class="shiduan-2-view-p">可预订时段</p>
						</view>
					</view>
				</view>
			</navigator>
			<navigator url="../../pages/room/room">
				<view class="port-three-list">
					<view class="port-three-list-one-port">
						<view class="port-three-list-one-port">
							<image class="list-one-port-img" src="https://shop.sdxinruan.com/taiqiu/static/fangjian.jpeg"
								mode=""></image>
								<p class="daiqingjie daiqingjie1 daiqingjie2">服务中 18:30 结束</p>
						</view>
						<view class="list-one-port-ri">
							<view class="list-one-port-ri-baoming">
								<p class="list-one-port-ri-baoming-p">VIP 富豪厅</p>
								<p class="list-one-port-ri-baoming-p1">（商务包）</p>
							</view>
							<view class="list-one-port-ri-tiaojian">
								<p class="list-one-port-ri-tiaojian-li">空调</p>
								<p class="list-one-port-ri-tiaojian-li">有窗</p>
								<p class="list-one-port-ri-tiaojian-li">4-10人</p>
								<p class="list-one-port-ri-tiaojian-li">商务</p>
								<p class="list-one-port-ri-tiaojian-li">WIFI</p>
								<p class="list-one-port-ri-tiaojian-li">玉石麻将</p>
								<p class="list-one-port-ri-tiaojian-li">茶台</p>
								<p class="list-one-port-ri-tiaojian-li">茶吧机</p>
								<p class="list-one-port-ri-tiaojian-li">沙发</p>
							</view>
							<view class="jiage">
								<view class="jiage-le">
									<p class="jiage-le-red">￥35.00</p>
									<p class="jiage-le-p1">元/小时</p>
								</view>
								<view class="jiage-ri">
									<p class="jiage-ri-p1">续单</p>
									<p class="jiage-ri-p2">￥35元</p>
									<p class="jiage-ri-p1">/小时</p>
								</view>
							</view>
							<view class="taocan">
								<view class="taocan-li">
									<p class="taocan-li-1">3小时套餐：￥90.0元</p>
									<p class="taocan-li-1 taocan-li-2">5小时套餐：￥150.0元</p>
								</view>
								<navigator url="/pages/room/room">
									<p class="yuding">预定</p>
								</navigator>
							</view>
						</view>
					</view>
					<div class="shiduan">
						<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
							<p class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
							<p class="shiduan-1-p2">{{ num }}</p>
						</div>
					</div>
					<view class="shiduan-2">
						<view class="shiduan-2-view">
							<p class="shiduan-1-p1"></p>
							<p class="shiduan-2-view-p">已预订时段</p>
						</view>
						<view class="shiduan-2-view shiduan-2-view1">
							<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
							<p class="shiduan-2-view-p">可预订时段</p>
						</view>
					</view>
				</view>
			</navigator>
			<view class="port-three-list">
				<view class="port-three-list-one-port">
					<view class="port-three-list-one-port">
						<image class="list-one-port-img" src="https://shop.sdxinruan.com/taiqiu/static/fangjian.jpeg"
							mode=""></image>
							<p class="daiqingjie daiqingjie1">空闲中</p>
					</view>
					<view class="list-one-port-ri">
						<view class="list-one-port-ri-baoming">
							<p class="list-one-port-ri-baoming-p">VIP 富豪厅</p>
							<p class="list-one-port-ri-baoming-p1">（商务包）</p>
						</view>
						<view class="list-one-port-ri-tiaojian">
							<p class="list-one-port-ri-tiaojian-li">空调</p>
							<p class="list-one-port-ri-tiaojian-li">有窗</p>
							<p class="list-one-port-ri-tiaojian-li">4-10人</p>
							<p class="list-one-port-ri-tiaojian-li">商务</p>
							<p class="list-one-port-ri-tiaojian-li">WIFI</p>
							<p class="list-one-port-ri-tiaojian-li">玉石麻将</p>
							<p class="list-one-port-ri-tiaojian-li">茶台</p>
							<p class="list-one-port-ri-tiaojian-li">茶吧机</p>
							<p class="list-one-port-ri-tiaojian-li">沙发</p>
						</view>
						<view class="jiage">
							<view class="jiage-le">
								<p class="jiage-le-red">￥35.00</p>
								<p class="jiage-le-p1">元/小时</p>
							</view>
							<view class="jiage-ri">
								<p class="jiage-ri-p1">续单</p>
								<p class="jiage-ri-p2">￥35元</p>
								<p class="jiage-ri-p1">/小时</p>
							</view>
						</view>
						<view class="taocan">
							<view class="taocan-li">
								<p class="taocan-li-1">3小时套餐：￥90.0元</p>
								<p class="taocan-li-1 taocan-li-2">5小时套餐：￥150.0元</p>
							</view>
							<navigator url="/pages/room/room">
								<p class="yuding">预定</p>
							</navigator>
						</view>
					</view>
				</view>
				<div class="shiduan">
					<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
						<p class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
						<p class="shiduan-1-p2">{{ num }}</p>
					</div>
				</div>
				<view class="shiduan-2">
					<view class="shiduan-2-view">
						<p class="shiduan-1-p1"></p>
						<p class="shiduan-2-view-p">已预订时段</p>
					</view>
					<view class="shiduan-2-view shiduan-2-view1">
						<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
						<p class="shiduan-2-view-p">可预订时段</p>
					</view>
				</view>
			</view>
			<view class="port-three-list">
				<view class="port-three-list-one-port">
					<view class="port-three-list-one-port">
						<image class="list-one-port-img" src="https://shop.sdxinruan.com/taiqiu/static/fangjian.jpeg"
							mode=""></image>
							<p class="daiqingjie daiqingjie1">空闲中</p>
					</view>
					<view class="list-one-port-ri">
						<view class="list-one-port-ri-baoming">
							<p class="list-one-port-ri-baoming-p">VIP 富豪厅</p>
							<p class="list-one-port-ri-baoming-p1">（商务包）</p>
						</view>
						<view class="list-one-port-ri-tiaojian">
							<p class="list-one-port-ri-tiaojian-li">空调</p>
							<p class="list-one-port-ri-tiaojian-li">有窗</p>
							<p class="list-one-port-ri-tiaojian-li">4-10人</p>
							<p class="list-one-port-ri-tiaojian-li">商务</p>
							<p class="list-one-port-ri-tiaojian-li">WIFI</p>
							<p class="list-one-port-ri-tiaojian-li">玉石麻将</p>
							<p class="list-one-port-ri-tiaojian-li">茶台</p>
							<p class="list-one-port-ri-tiaojian-li">茶吧机</p>
							<p class="list-one-port-ri-tiaojian-li">沙发</p>
						</view>
						<view class="jiage">
							<view class="jiage-le">
								<p class="jiage-le-red">￥35.00</p>
								<p class="jiage-le-p1">元/小时</p>
							</view>
							<view class="jiage-ri">
								<p class="jiage-ri-p1">续单</p>
								<p class="jiage-ri-p2">￥35元</p>
								<p class="jiage-ri-p1">/小时</p>
							</view>
						</view>
						<view class="taocan">
							<view class="taocan-li">
								<p class="taocan-li-1">3小时套餐：￥90.0元</p>
								<p class="taocan-li-1 taocan-li-2">5小时套餐：￥150.0元</p>
							</view>
							<navigator url="/pages/room/room">
								<p class="yuding">预定</p>
							</navigator>
						</view>
					</view>
				</view>
				<div class="shiduan">
					<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
						<p class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
						<p class="shiduan-1-p2">{{ num }}</p>
					</div>
				</div>
				<view class="shiduan-2">
					<view class="shiduan-2-view">
						<p class="shiduan-1-p1"></p>
						<p class="shiduan-2-view-p">已预订时段</p>
					</view>
					<view class="shiduan-2-view shiduan-2-view1">
						<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
						<p class="shiduan-2-view-p">可预订时段</p>
					</view>
				</view>
			</view>
			<view class="port-three-list">
				<view class="port-three-list-one-port">
					<view class="port-three-list-one-port">
						<image class="list-one-port-img" src="https://shop.sdxinruan.com/taiqiu/static/fangjian.jpeg"
							mode=""></image>
							<p class="daiqingjie daiqingjie1">空闲中</p>
					</view>
					<view class="list-one-port-ri">
						<view class="list-one-port-ri-baoming">
							<p class="list-one-port-ri-baoming-p">VIP 富豪厅</p>
							<p class="list-one-port-ri-baoming-p1">（商务包）</p>
						</view>
						<view class="list-one-port-ri-tiaojian">
							<p class="list-one-port-ri-tiaojian-li">空调</p>
							<p class="list-one-port-ri-tiaojian-li">有窗</p>
							<p class="list-one-port-ri-tiaojian-li">4-10人</p>
							<p class="list-one-port-ri-tiaojian-li">商务</p>
							<p class="list-one-port-ri-tiaojian-li">WIFI</p>
							<p class="list-one-port-ri-tiaojian-li">玉石麻将</p>
							<p class="list-one-port-ri-tiaojian-li">茶台</p>
							<p class="list-one-port-ri-tiaojian-li">茶吧机</p>
							<p class="list-one-port-ri-tiaojian-li">沙发</p>
						</view>
						<view class="jiage">
							<view class="jiage-le">
								<p class="jiage-le-red">￥35.00</p>
								<p class="jiage-le-p1">元/小时</p>
							</view>
							<view class="jiage-ri">
								<p class="jiage-ri-p1">续单</p>
								<p class="jiage-ri-p2">￥35元</p>
								<p class="jiage-ri-p1">/小时</p>
							</view>
						</view>
						<view class="taocan">
							<view class="taocan-li">
								<p class="taocan-li-1">3小时套餐：￥90.0元</p>
								<p class="taocan-li-1 taocan-li-2">5小时套餐：￥150.0元</p>
							</view>
							<navigator url="/pages/room/room">
								<p class="yuding">预定</p>
							</navigator>
						</view>
					</view>
				</view>
				<div class="shiduan">
					<div class="shiduan-1" v-for="(num, index) in sortedTimeArray" :key="index">
						<p class="shiduan-1-p1" :class="{ 'shiduan-1-p1-gray': index > currentTimeIndex }"></p>
						<p class="shiduan-1-p2">{{ num }}</p>
					</div>
				</div>
				<view class="shiduan-2">
					<view class="shiduan-2-view">
						<p class="shiduan-1-p1"></p>
						<p class="shiduan-2-view-p">已预订时段</p>
					</view>
					<view class="shiduan-2-view shiduan-2-view1">
						<p class="shiduan-1-p1 shiduan-1-p1-gray"></p>
						<p class="shiduan-2-view-p">可预订时段</p>
					</view>
				</view>
			</view>
		</view>
		<view class="fenxiangerweima">
			<u-popup :show="show" mode="center" height="400px" border-radius="14" @close="show = false">
				<view class="fenxiangtu">
					<p @click="show = !show" class="faqi-butt-1">开包厢-门禁</p>
				</view>
			</u-popup>
		</view>
		<view class="gonggao">
			<u-popup :show="show1" mode="center" height="400px" border-radius="14" @close="show1 = false">
				<view class="gonggao1">
					<p class="gonggao1-tit">公告</p>
					<p class="gonggao1-tit gonggao1-tit1">我们仅提供场地及相应设备设施，使用人须遵守治安管理条例，违者由使用人自行承担相应责任及后果。</p>
					<p class="roles roles1">1.严禁未成年人进入场所;</p>
					<p class="roles">2.严禁黄、赌、毒、打架斗殴等一切违法活动3.使用人须自行对身体状况负责，注意个人安全;</p>
					<p class="roles">3.使用人须自行对身体状况负责，注意个人安全;</p>
					<p class="roles">4.破坏或带走本场所提供的设备设施请照价赔偿;</p>
					<p class="roles">5.请自行保管好私人物品，如有遗失概不负责</p>
					<view class="zixi-view">
						<p class="zixi-button" @click="show1 = !show1">我已仔细阅读了</p>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeArray: [ // 存放时间段的起始时间
					1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
					13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
					23, 24
				],
				sortedTimeArray: [], // 排序后的时间数组
				currentTimeIndex: 0 ,// 当前时间在数组中的索引
				show: false,
				show1: true
			};
		},
		created() {
			this.sortTimeArray(); // 初始排序
			setInterval(() => {
				this.sortTimeArray(); // 定时排序
			}, 1000 * 60); // 每分钟更新一次
		},
		methods: {
			sortTimeArray() {
				const currentHour = new Date().getHours(); // 获取当前小时数
				this.currentTimeIndex = this.timeArray.indexOf(currentHour); // 获取当前时间在数组中的索引
				if (this.currentTimeIndex === -1) {
					return; // 当前时间不在数组中，不需要排序
				}
				const newTimeArray = this.timeArray.slice(this.currentTimeIndex).concat(this.timeArray.slice(0, this
					.currentTimeIndex)); // 将早于当前时间的时间段移到数组末尾
				this.sortedTimeArray = newTimeArray; // 保存排序后的数组
			}
		}
	};
</script>

<style>
	@import url(./index.css);
</style>